<template>
  <div class="ProductList">
    <h3 v-if="title">{{ title }}</h3>
    <ul class="ProductList_cont" v-if="prosList.length > 0">
      <li
        class="ProductList_cont_item"
        v-for="(item, index) in prosList"
        :key="index"
      >
        <div>
          <img
            class="ProductList_cont_item_img"
            @click="goToCommodityDetails(item.sku)"
            :src="$base.baseImg + item.img[0]"
          />
          <p>
            {{ item.proName }}
          </p>
          <h4>
            ￥{{ (item.price / 100).toFixed(2) }}
            <img v-if="item.online!=1" @click="addCart(item)" src="@/assets/gouwuche.png" />
          </h4>
        </div>
      </li>
    </ul>
    <van-empty v-else />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import { Empty } from "vant";

Vue.use(Empty);
@Component({})
export default class ProductList extends Vue {
  @Prop() prosList?: [];
  @Prop() title: string | undefined;
  private goToCommodityDetails(e: string) {
    this.$router.push(`/commodityDetails/${e}`);
  }
  @Emit()
  addCart(e: any) {
    return e;
  }
}
</script>

<style lang="scss">
.ProductList {
  width: 100%;
  padding:0 10px;
  box-sizing: border-box;
  & > h3 {
    font-size: 35px;
    line-height: 1.5;
    padding-left: 10px;
    border-left: 5px solid #b99267;
    box-sizing: border-box;
    font-weight: normal;
    margin: 20px 15px;
  }
  & > .ProductList_cont {
    list-style: none;
    overflow: hidden;
    margin-top: 20px;
    & > .ProductList_cont_item {
      width: 50%;
      float: left;
      padding: 0 15px;
      box-sizing: border-box;
      margin-bottom: 30px;
      div {
        width: 100%;
        background-color: #fff;
        border-radius: 15px;
        overflow: hidden;
        padding-bottom: 10px;
        .ProductList_cont_item_img {
          width: 100%;
          display: block;
          height: 250px;
        }
        p {
          font-size: 24px;
          font-weight: 400;
          color: #333333;
          padding: 0 15px;
          box-sizing: border-box;
          line-height: 1.5;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        h4 {
          font-size: 34px;
          font-weight: 300;
          color: #f53131;
          line-height: 1.5;
          padding: 0 15px;
          box-sizing: border-box;
          img {
            width: 34px;
            margin-top: 15px;
            float: right;
            display: block;
          }
        }
      }
    }
  }
}
</style>